<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>設定新酷音輸入法</title>
    <link rel="shortcut icon" href="images/logo.ico" type="image/vnd.microsoft.icon">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-select.min.css">
    <link rel="stylesheet" href="css/sweetalert2.min.css">
    <link rel="stylesheet" href="css/config.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" href="#typing_tab" aria-controls="typing_tab" role="tab" data-toggle="tab">打字行為</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#ui_tab" aria-controls="ui_tab" role="tab" data-toggle="tab">選字視窗外觀</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#keyboard_tab" aria-controls="keyboard_tab" role="tab" data-toggle="tab">鍵盤設定</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#symbols_tab" aria-controls="symbols_tab" role="tab" data-toggle="tab">特殊符號</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#ez_symbols_tab" aria-controls="ez_symbols_tab" role="tab" data-toggle="tab">簡易符號輸入</a>
                    </li>
                    <li class="nav-item ml-auto">
                        <a class="nav-link" href="#about_tab" aria-controls="about_tab" role="tab" data-toggle="tab">關於新酷音</a>
                    </li>
                </ul>

                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in show active form" id="typing_tab">
                        <div class="config_section">
                            <h1>中英文切換</h1>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="switchLangWithShift" name="switchLangWithShift">
                                <label class="custom-control-label" for="switchLangWithShift"
                                    data-content="不建議同時使用「<b>使用左 Shift、 右 Shift 在打字時移動游標</b>」設定"
                                    data-html="true" data-toggle="popover"
                                    data-placement="bottom" data-trigger="hover">使用<kbd>Shift</kbd>切換中英文模式 🛈</label>
                            </div>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="enableCapsLock" name="enableCapsLock">
                                <label class="custom-control-label" for="enableCapsLock">使用<kbd>CapsLock</kbd>切換中英文模式</label>
                            </div>
                        </div>
                        <div class="config_section">
                            <h1>中文模式輸入設定</h1>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="fullShapeSymbols" name="fullShapeSymbols">
                                <label class="custom-control-label" for="fullShapeSymbols">非注音符號對應鍵輸出全形標點符號（例如預設注音鍵盤配置下的"＝「」＼、"鍵，會輸出全形標點符號）</label>
                            </div>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="fullShapeSymbolsWithShift" name="fullShapeSymbolsWithShift">
                                <label class="custom-control-label" for="fullShapeSymbolsWithShift">按住<kbd>Shift</kbd>輸出全形標點符號</label>
                            </div>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="upperCaseWithShift" name="upperCaseWithShift">
                                <label class="custom-control-label" for="upperCaseWithShift">按住<kbd>Shift</kbd>輸出英文大寫字母</label>
                            </div>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="escCleanAllBuf" name="escCleanAllBuf">
                                <label class="custom-control-label" for="escCleanAllBuf">使用<kbd>Esc</kbd>清空輸入區字串</label>
                            </div>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="enableShiftSpace" name="enableShiftSpace">
                                <label class="custom-control-label" for="enableShiftSpace">使用<kbd>Shift</kbd>+<kbd>空白鍵</kbd>切換全形/半形</label>
                            </div>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="enableSwitchTCSC" name="enableSwitchTCSC">
                                <label class="custom-control-label" for="enableSwitchTCSC">使用<kbd>Ctrl</kbd>+<kbd>F12</kbd>切換繁體/簡體</label>
                            </div>
                            使用<kbd>Ctrl</kbd>+<kbd>1 ~ 9數字鍵</kbd>加入游標
                            <select name="addPhraseForward" id="addPhraseForward"></select>
                        </div>
                        <div class="config_section">
                            <h1>選字視窗動作</h1>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="advanceAfterSelection" name="advanceAfterSelection">
                                <label class="custom-control-label" for="advanceAfterSelection">選字完畢自動跳到下一個字</label>
                            </div>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="shiftMoveCursor" name="shiftMoveCursor">
                                <label class="custom-control-label" for="shiftMoveCursor" data-content="不建議同時使用「<b>使用Shift切換中英文模式</b>」設定"
                                    data-toggle="popover" data-html="true"
                                    data-placement="bottom" data-trigger="hover">使用<kbd>左 Shift</kbd>、 <kbd>右 Shift</kbd>
                                    在打字時移動游標 🛈</label>
                            </div>
                            使用<kbd>↑</kbd><kbd>↓</kbd>鍵：
                            <select name="upDownAction" id="upDownAction"></select><br>
                            使用<kbd>←</kbd><kbd>→</kbd>鍵：
                            <select name="leftRightAction" id="leftRightAction"></select><br>
                            使用<kbd>空白鍵</kbd>在打字時：
                            <select name="spaceKeyAction" id="spaceKeyAction"></select>，在選字時：<select name="spaceKeyCandidatesAction"
                                id="spaceKeyCandidatesAction"></select><br>
                        </div>
                        <div class="config_section">
                            <h1>其他</h1>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="disableOnStartup" name="disableOnStartup">
                                <label class="custom-control-label" for="disableOnStartup">預設以停用輸入法模式啟動（Windows 8 以上適用）</label>
                            </div>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultFullSpace" name="defaultFullSpace">
                                <label class="custom-control-label" for="defaultFullSpace">預設以全形模式啟動</label>
                            </div>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultEnglish" name="defaultEnglish">
                                <label class="custom-control-label" for="defaultEnglish">預設以英文模式啟動</label>
                            </div>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="outputSimpChinese" name="outputSimpChinese">
                                <label class="custom-control-label" for="outputSimpChinese">預設輸出簡體中文</label><br>
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="ui_tab">
                        <div class="form-group row">
                            <label for="candPerRow">每列顯示候選字個數（1-10）：</label>
                            <input type="number" class="form-control" id="candPerRow" name="candPerRow" min="1" max="10">
                        </div>
                        <div class="form-group row">
                            <label for="candPerPage">每頁顯示候選字總數（1-10）：</label>
                            <input type="number" class="form-control" id="candPerPage" name="candPerPage" min="1" max="10">
                        </div>
                        <div class="form-group row">
                            <label for="fontSize">選字及訊息視窗文字大小：</label>
                            <input type="number" class="form-control" id="fontSize" name="fontSize" min="6" max="200">
                        </div>
                        <div class="form-group row">
                            <label for="selKeyType">選字視窗選字鍵：</label>
                            <select name="selKeyType" id="selKeyType"></select>
                        </div>

                        <div id="selExample"></div>

                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="keyboard_tab">
                        <!-- keyboard layouts inserted here by javascript -->
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="symbols_tab">
                        <p class="well">
                            新酷音輸入法提供的符號表可以自訂，中文模式按下<kbd>`</kbd>可以呼叫出符號表。<br> 每一行的內容都是：
                            <strong>「分類名稱」=「此分類下的所有符號」</strong>。您也可以一行只放一個符號，則該符號會被放在最上層選單。
                        </p>
                        <textarea id="symbols" class="form-control" rows="13"></textarea>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="ez_symbols_tab">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="easySymbolsWithShift" name="easySymbolsWithShift">
                            <label class="custom-control-label" for="easySymbolsWithShift">中文模式下按住<kbd>Shift</kbd>快速輸入符號</label><br>
                        </div>

                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="easySymbolsWithCtrl" name="easySymbolsWithCtrl">
                            <label class="custom-control-label" for="easySymbolsWithCtrl"
                                data-content="<span class='text-warning'>容易產生熱鍵衝突，不建議使用</span></br>
                                例如常用的複製貼上熱鍵Ctrl + C，Ctrl + V，會和這個功能衝突，需要切回英文模式才能使用"
                                data-html="true" data-toggle="popover" data-placement="bottom"
                                data-trigger="hover">中文模式下按住<kbd>Ctrl</kbd> 快速輸入符號 🛈</label>
                        </div>
                        <p class="well">
                            以下是使用<kbd>Ctrl</kbd>或<kbd>Shift</kbd>快速輸入符號的設定，每一行表示一個鍵所對應的字串，格式為<strong>「英文大寫」+「半形空白」+「字串」</strong><br>例如「M
                            新酷音」或是「L orz」，字串的長度為1-10個字元。
                        </p>
                        <textarea id="ez_symbols" class="form-control"></textarea>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="about_tab">
                        <p class="text-center"><img src="images/logo.png" alt="新酷音輸入法Logo" /></p>
                        <p>PIME 輸入法平台版本：<strong id="version"></strong></p>
                        <p>最早的「酷音輸入法」是<a href="http://www.csie.ntu.edu.tw/~b6506053/" target="_blank">龔律全</a>與<a
                                href="https://plus.google.com/u/0/106631098488727416298/posts" target="_blank">陳康本</a>兩人的資訊專題
                            (分別在兩人就讀台大資工系與台大電機系的時期)，由中央研究院資訊研究所的
                            <a href="http://www.iis.sinica.edu.tw/~tshsu" target="_blank">徐讚昇</a>博士提供技術指導與超過兩年的經濟及設備支援，最終的成果選擇以 GPL 授權釋出，可說是 XIM (X Input
                            Method)中最接近新注音或是自然輸入法的實作，詳情可參閱龔律全所撰寫的
                            <a href="http://chewing.im/doc/chewing-report.pdf" target="_blank">技術報告（PDF）</a>。</p>
                        <p>但是酷音輸入法的兩位原創者已不再維護，後續的發展由許多熱心的朋友移植到不同的平台上，諸如 TimHsu (crazykid) 與 jserv 維護的 JMCCE 1.4.x 中文終端機內建酷音輸入法、clkao 移植酷音到 MacOS X 與 IIIMF 架構，以及
                            gugod 接手 clkao 的 ChewingOSX 後，大幅改善實作的 SpaceChewing 計畫等。而新酷音就是扮演整合這些分支的角色，並且更廣泛移植與改良酷音輸入法的適用性，並且於 2004 年 12
                            月有獨立的專案資源，到目前為止，已有許多熱心的貢獻者加入開發行列，期待更多的朋友參與。</p>
                        <p>關於本計畫概況，可參閱新酷音計畫在 2004 國際開放源碼研討會（ICOS 2004）上的<a href="http://chewing.im/doc/chewing-intro.html" target="_blank">簡報（Adobe Flash）</a>。
                        </p>
                        <p>本 Windows 版本是由<a href="https://github.com/PCMan" target="_blank">洪任諭（PCMan）</a>移植到 <a href="https://github.com/EasyIME/PIME"
                                target="_blank">PIME 輸入法平台</a>上 Copyright &copy; 2015 - 2016</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <button class="col-md-4 btn btn-primary" id="ok">套用設定</button>
        </div>
    </div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/bootstrap-select.min.js"></script>
    <script src="js/sweetalert2.min.js"></script>
    <script src="js/config.js"></script>
</body>

</html>
